<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Quartz</title>
  <!--<link rel="stylesheet" href="https://unpkg.com/element-ui@2.0.5/lib/theme-chalk/index.css">-->
  <!--<script src="https://unpkg.com/vue/dist/vue.js"></script>-->
  <!--<script src="http://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.js"></script>-->
  <!--<script src="https://unpkg.com/element-ui@2.0.5/lib/index.js"></script>-->
  <link rel="stylesheet" href="../css/element-ui-index.css">
  <script src="../lib/vue.min.js"></script>
  <script src="../lib/element-ui-index.js"></script>
  <script src="../lib/vue-resource.js"></script>

  <style>
    #top {
      background: #20A0FF;
      padding: 5px;
      overflow: hidden
    }
  </style>

</head>
<body>
<div id="test">

  <div id="top">
    <el-button type="text" @click="search" style="color:white">查询</el-button>
    <el-button type="text" @click="handleadd" style="color:white">添加</el-button>
    </span>
  </div>

  <br/>

  <div align="center">
    <p>VSOP定时任务管理</p>
  </div>

  <div style="margin-top:15px">

    <el-table
        ref="testTable"
        :data="tableData"
        style="width:100%"
        border
    >
      <el-table-column
          prop="jobName"
          label="任务名称"
          sortable
          show-overflow-tooltip>
      </el-table-column>

      <el-table-column
          prop="jobGroup"
          label="任务所在组"
          sortable>
      </el-table-column>

      <el-table-column
          prop="description"
          label="任务描述"
          show-overflow-tooltip>
      </el-table-column>

      <el-table-column
          prop="className"
          label="任务类名"
          sortable>
      </el-table-column>

      <el-table-column
          prop="method"
          label="任务方法名"
          sortable>
      </el-table-column>

      <el-table-column
          prop="cronExpression"
          label="表达式"
          sortable>
      </el-table-column>

      <el-table-column
          prop="state":formatter="stateFormat"
          label="状态"
          sortable>
      </el-table-column>

      <el-table-column
          prop="nextFireTime"
          label="下次执行时间"
          sortable>
      </el-table-column>

      <el-table-column
          prop="updateTime"
          label="任务更新时间"
          sortable>
      </el-table-column>

      <el-table-column label="操作" width="300">
        <template scope="scope">
          <el-button
              size="small"
              type="warning"
              @click="handlePause(scope.$index, scope.row)">暂停
          </el-button>

          <el-button
              size="small"
              type="info"
              @click="handleResume(scope.$index, scope.row)">恢复
          </el-button>

          <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>

          <el-button
              size="small"
              type="success"
              @click="handleUpdate(scope.$index, scope.row)">修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div align="center">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount">
      </el-pagination>
    </div>
  </div>

  <el-dialog title="添加任务" :visible.syn="dialogFormVisible" :show-close="false">
    <el-form :model="form">
      <el-form-item label="任务名称" label-width="120px" style="width:70%">
        <el-input v-model="form.jobName" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="任务分组" label-width="120px" style="width:35%">
        <el-input v-model="form.jobGroup" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="任务状态(0禁用 1启用)" label-width="120px" style="width:35%">
        <el-input v-model="form.state" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="时间表达式" label-width="120px" style="width:35%">
        <el-input v-model="form.cronExpression" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="任务描述" label-width="120px" style="width:35%">
        <el-input v-model="form.description" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="执行任务类名" label-width="120px" style="width:35%">
        <el-input v-model="form.className" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="执行任务方法" label-width="120px" style="width:35%">
        <el-input v-model="form.method" auto-complete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="add">确 定</el-button>
    </div>
  </el-dialog>

  <el-dialog title="修改任务" :visible.syn="updateFormVisible" :show-close="false">
    <el-form :model="updateform">
      <el-form-item label="表达式" label-width="120px" style="width:70%">
        <el-input v-model="updateform.cronExpression" auto-complete="on"></el-input>
      </el-form-item>
      <el-form-item label="任务状态(0停止 1启动)" label-width="120px" style="width:70%">
        <el-input v-model="updateform.state" auto-complete="on"></el-input>
      </el-form-item>
      <el-form-item label="执行任务方法" label-width="120px" style="width:70%">
        <el-input v-model="updateform.method" auto-complete="on"></el-input>
      </el-form-item>
      <el-form-item label="执行任务类名" label-width="120px" style="width:70%">
        <el-input v-model="updateform.className" auto-complete="on"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="updateFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="update">确 定</el-button>
    </div>
  </el-dialog>

</div>

<footer align="center">
  <p></p>
</footer>

<script>
  var vue = new Vue({
    el: "#test",
    data: {
      //表格当前页数据
      tableData: [],

      //请求的URL
      url: 'job/queryjob',

      //默认每页数据量
      pagesize: 10,

      //当前页码
      currentPage: 1,

      //查询的页码
      start: 1,

      //默认数据总数
      totalCount: 1000,

      //添加对话框默认可见性
      dialogFormVisible: false,

      //修改对话框默认可见性
      updateFormVisible: false,

      //提交的表单
      form: {
        jobName: '',
        jobGroup: '',
        state: '',
        cronExpression: '',
        description: '',
        className: '',
        method: '',
      },

      updateform: {
        id: "",
        className: "",
        method: "",
        cronExpression: '',
        state: '',
      },
    },

    methods: {

      //从服务器读取数据
      loadData: function (pageNum, pageSize) {
        this.$http.post('../../scheduleJobControl/getScheduleJobListByPage', JSON.stringify({
          "pageNum": 1,
          "pageSize": 5
        }), {emulateJSON: true}).then(function (res) {
          this.tableData = res.body.ScheduleJobList;
          this.totalCount = res.body.page.totalSize;
        }, function () {
          alert("400");
        });
      },

      //单行删除
      handleDelete: function (index, row) {
        this.$http.post('../../scheduleJobControl/deleteScheduleJob',
            JSON.stringify({"id": row.id}),
            {emulateJSON: true}).then(function (res) {
          if ("0" == res.body.resCode) {
            this.loadData(this.currentPage, this.pagesize);
          } else {
            alert(res.body.resMsg);
            this.loadData(this.currentPage, this.pagesize);
          }
        }, function () {
          alert("400");
        });
      },

      //暂停任务
      handlePause: function (index, row) {
        this.$http.post('../../scheduleJobControl/pauseJob',
            JSON.stringify({"jobName": row.jobName, "id": row.id}),
            {emulateJSON: true}).then(function (res) {
          if ("0" == res.body.resCode) {
            this.loadData(this.currentPage, this.pagesize);
          } else {
            alert(res.body.resMsg);
            this.loadData(this.currentPage, this.pagesize);
          }
        }, function () {
          console.log('failed');
        });
      },

      //恢复任务
      handleResume: function (index, row) {
        this.$http.post('../../scheduleJobControl/startJob',
            JSON.stringify({"id": row.id, "jobName": row.jobName, "jobGroup": row.jobGroup}),
            {emulateJSON: true}).then(function (res) {
          if ("0" == res.body.resCode) {
            this.loadData(this.currentPage, this.pagesize);
          } else {
            alert(res.body.resMsg);
            this.loadData(this.currentPage, this.pagesize);
          }
        }, function () {
          alert("400")
        });
      },

      //搜索
      search: function () {
        this.loadData(this.currentPage, this.pagesize);
      },

      //弹出新增对话框
      handleadd: function () {
        this.dialogFormVisible = true;
      },

      //添加
      add: function () {
        if (!this.form.jobName) {
          alert("任务名称不能为空");
          this.dialogFormVisible = false;
          this.loadData(this.currentPage, this.pagesize);
          return;
        }
        if (!this.form.jobGroup) {
          alert("任务分组不能为空");
          this.dialogFormVisible = false;
          this.loadData(this.currentPage, this.pagesize);
          return;
        }
        if (!this.form.cronExpression) {
          alert("运行时间表达式不能为空");
          this.dialogFormVisible = false;
          this.loadData(this.currentPage, this.pagesize);
          return;
        }
        if (!this.form.className) {
          alert("执行任务类名不能为空");
          this.dialogFormVisible = false;
          this.loadData(this.currentPage, this.pagesize);
          return;
        }
        if (!this.form.method) {
          alert("执行任务方法不能为空");
          this.dialogFormVisible = false;
          this.loadData(this.currentPage, this.pagesize);
          return;
        }
        this.$http.post('../../scheduleJobControl/insertScheduleJob', JSON.stringify({
          "jobName": this.form.jobName,
          "jobGroup": this.form.jobGroup,
          "state": this.form.state,
          "cronExpression": this.form.cronExpression,
          "description": this.form.description,
          "className": this.form.className,
          "method": this.form.method
        }), {emulateJSON: true}).then(function (res) {
          this.loadData(this.currentPage, this.pagesize);
          this.dialogFormVisible = false;
        }, function () {
          alert("400");
        });
      },

      //更新
      handleUpdate: function (index, row) {
        this.updateFormVisible = true;
        this.updateform.id = row.id;
        this.updateform.className = row.className;
        this.updateform.method = row.method;
        this.updateform.state = row.state;
        this.updateform.cronExpression = row.cronExpression;
      },

      //更新任务
      update: function () {
        this.$http.post
        ('../../scheduleJobControl/updateScheduleJob',
            JSON.stringify({
              "cronExpression": this.updateform.cronExpression,
              "id": this.updateform.id,
              "className": this.updateform.className,
              "method": this.updateform.method,
              "state": this.updateform.state
            }),
            {emulateJSON: true}
        ).then(function (res) {
          if ("0" == res.body.resCode) {
            this.loadData(this.currentPage, this.pagesize);
            this.updateFormVisible = false;
          } else {
            alert(res.body.resMsg);
            this.loadData(this.currentPage, this.pagesize);
            this.updateFormVisible = false;
          }
        }, function () {
          alert("400");
        });

      },

      //每页显示数据量变更
      handleSizeChange: function (val) {
        this.pagesize = val;
        this.loadData(this.currentPage, this.pagesize);
      },

      //状态格式化
      stateFormat(row, column) {
        if (row.state === "1") {
          return '工作中'
        } else  {
          return '停止'
        }
      },

      //页码变更
      handleCurrentChange: function (val) {
        this.currentPage = val;
        this.loadData(this.currentPage, this.pagesize);
      },

    },

  });

  //载入数据
  vue.loadData(vue.currentPage, vue.pagesize);
</script>

</body>
</html>
